<template>
  <div class="JustCard">
    <div class="justItem" v-loading="loading">
      <div class="dbData">
        <div class="dbWrap addDb" @click="addCategory()">
          <el-card
            shadow="hover"
            :body-style="{cursor: 'pointer',position:'relative',height:'310px',display:'flex', 'align-items':'center',
                'justify-content':'center' }"
          >
            <div class="addProduct">
              <i class="el-icon-plus"></i> 添加库
            </div>
          </el-card>
        </div>
        <div
          class="dbWrap"
          v-for="(o, index) in dbCategory"
          :key="index"
          :offset="index > 0 ? 1 : 0"
        >
          <el-card
            shadow="hover"
            :body-style="{cursor: 'pointer',position:'relative',height:'310px' }"
          >
            <div class="firstDiv" @click="goDbIndex(o)">
              <div class="fLeftDiv">
                <img :src="o.imgUrl" class="image" />
              </div>
              <div class="fRight">
                <div class="titCon">
                  数据库名称：
                  <span>{{o.name}}</span>
                </div>
                <div class="titCon">
                  占用空间：
                  <span>{{o.occupiedSpaceCount/1024}} / M</span>
                </div>
                <div class="titCon">
                  用户：
                  <span>{{o.userCount}}</span>
                </div>
                <div class="titCon">
                  表数量：
                  <span>{{ o.tableCount }}</span>
                </div>
              </div>
            </div>
            <div class="secendDiv">
              <div class="sLeftDiv" @click.stop.prevent="editCard(o)">编辑</div>
              <div style="width:1%;float:left;height:100%">
                <el-divider direction="vertical"></el-divider>
              </div>
              <div class="sRightDiv" @click.stop.prevent="deleteTable(o)">删除</div>
            </div>
          </el-card>
        </div>
      </div>
    </div>

    <!--添加弹窗 -->
    <el-dialog :title="isEdit ? '修改数据库' : '添加数据库'" :visible.sync="dialogVisible" width="710px">
      <div>
        <el-form :model="dbData" label-width="250px" :rules="addDbDataRules" ref="dbData">
          <!-- <el-form-item label="数据库别名:" prop="aliasName">
            <el-input style="width:250px" v-model="dbData.aliasName"></el-input>
          </el-form-item>-->

          <el-form-item label="数据源名称:" prop="dbName">
            <el-input style="width: 250px" v-model="dbData.dbName"></el-input>
          </el-form-item>

          <el-form-item label="id" prop="id" style="display:none">
            <el-input style="width: 250px" v-model="dbData.id"></el-input>
          </el-form-item>

          <el-form-item label="数据库类型:" prop="dbType">
            <!-- <el-input style="width: 250px" v-model="dbData.dbType"></el-input> -->
            <el-select
              v-model="dbData.dbType"
              placeholder
              @change="changeSele"
              style="width: 250px"
            >
              <el-option
                v-for="(item,index) in dbTypes"
                :key="index"
                :label="item.dbType"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="驱动:" prop="dbDriver">
            <el-input style="width:250px" v-model="dbData.dbDriver"></el-input>
          </el-form-item>

          <el-form-item label="连接串:" prop="dbUrl">
            <el-input style="width: 250px" v-model="dbData.dbUrl"></el-input>
          </el-form-item>

          <el-form-item label="账号:" prop="dbUsername">
            <el-input style="width: 250px" v-model="dbData.dbUsername"></el-input>
          </el-form-item>

          <el-form-item label="密码:" prop="dbPassword">
            <el-input type="password" style="width: 250px" v-model="dbData.dbPassword"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer">
        <el-button @click="testBtn('dbData')">测试连接</el-button>
        <el-button type="primary" @click="submitAddValue('dbData')">确定提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import localStorage from '@/utils/localStorage'
export default {
  data() {
    return {
      loading: false,
      currentDate: new Date(),
      dbCategory: [],
      popoverWidth: '30',
      isEdit: false,
      addDbDataRules: {
        // aliasName: [
        //   { required: true, message: '请输入数据库别名', trigger: 'blur' },
        // ],
        dbName: [
          { required: true, message: '请输入数据源名称', trigger: 'blur' },
        ],
        dbDriver: [
          { required: true, message: '请输入数据库驱动', trigger: 'blur' },
        ],
        dbType: [
          { required: true, message: '请输入数据库类型', trigger: 'blur' },
        ],
        dbUrl: [
          { required: true, message: '请输入数据库连接串', trigger: 'blur' },
        ],
        dbUsername: [
          { required: true, message: '请输入数据库账号', trigger: 'blur' },
        ],
        dbPassword: [
          { required: true, message: '请输入数据库密码', trigger: 'blur' },
        ],
      },
      dbData: {
        aliasName: '',
        dbDriver: '',
        dbName: '',
        dbType: '',
        dbUrl: '',
        dbUsername: '',
        dbPassword: '',
        id: '',
      },
      dialogVisible: false,
      dbTypes: [
        {
          dbType: 'MYSQL5.5',
          dbDriver: 'com.mysql.jdbc.Driver',
          dbUrl:
            'jdbc:mysql://127.0.0.1:3306/jimureport?characterEncoding=UTF-8&useUnicode=true&useSSL=false&serverTimezone=GMT%2B8&tinyInt1isBit=false',
        },
        {
          dbType: 'MYSQL5.7',
          dbDriver: 'com.mysql.cj.jdbc.Driver',
          dbUrl:
            'jdbc:mysql://127.0.0.1:3306/jimureport?useUnicode=true&characterEncoding=UTF-8&serverTimezone=GMT%2B8&tinyInt1isBit=false',
        },
        {
          dbType: 'ORACLE',
          dbDriver: 'oracle.jdbc.OracleDriver',
          dbUrl: 'jdbc:oracle:thin:@127.0.0.1:1521:ORCL',
        },
        {
          dbType: 'SQLSERVER',
          dbDriver: 'com.microsoft.sqlserver.jdbc.SQLServerDriver',
          dbUrl:
            'jdbc:sqlserver://127.0.0.1:1433;SelectMethod=cursor;DatabaseName=jimureport',
        },
        {
          dbType: 'POSTGRESQL',
          dbDriver: 'org.postgresql.Driver',
          dbUrl: 'jdbc:postgresql://127.0.0.1:5432/jimureport',
        },
      ],
    }
  },
  created() {
    this.goDbServe()
  },
  methods: {
    goDbServe() {
      this.loading = true
      this.$db.getDbTable().then((res) => {
        if (res.code == 200) {
          this.loading = false
          this.dbCategory = res.data
        } else {
          this.$message.error(res.code + '-' + res.msg)
        }
      })
    },

    changeSele(val) {
      this.dbData.dbType = val.dbType
      this.dbData.dbDriver = val.dbDriver
      this.dbData.dbUrl = val.dbUrl
    },

    goDbIndex(o) {
      console.log(o)
      localStorage.set('dbSecrekey', o.dbId)
      localStorage.set('dbItem', o.dbName)
      localStorage.set('db', o)
      this.$router.push({
        path: '/dbConfig/index',
      })
    },

    /* 新建目录 */
    addCategory() {
      this.dbData.aliasName = ''
      this.dbData.dbDriver = ''
      this.dbData.dbName = ''
      this.dbData.dbType = ''
      this.dbData.dbUrl = ''
      this.dbData.dbUsername = ''
      this.dbData.dbPassword = ''
      this.dbData.id = ''
      this.isEdit = false
      this.dialogVisible = true
    },

    //编辑库
    editCard(o) {
      this.isEdit = true
      console.log(o)
      this.dialogVisible = true
      this.dbData.aliasName = o.aliasName
      this.dbData.dbDriver = o.dbDriver
      this.dbData.dbName = o.dbName
      this.dbData.dbType = o.dbType
      this.dbData.dbUrl = o.dbUrl
      this.dbData.dbUsername = o.dbUsername
      this.dbData.dbPassword = o.dbPassword
      this.dbData.id = o.id
    },

    //添加数据库
    submitAddValue(formName) {
      this.loading = true
      console.log(this.dbData.id)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = JSON.parse(JSON.stringify(this[formName]))
          if (this.dbData.id) {
            params = {
              id: this.dbData.id,
              aliasName: this.dbData.aliasName,
              dbDriver: this.dbData.dbDriver,
              name: this.dbData.dbName,
              dbType: this.dbData.dbType,
              dbUrl: this.dbData.dbUrl,
              dbUsername: this.dbData.dbUsername,
              dbPassword: this.dbData.dbPassword,
            }
          } else {
            params = this.dbData
          }
          // let apiName = this.isEdit ? 'patchDbTable' : 'addDbConnect'
          // this.$db[apiName](params)

          this.$db
            .addDbTest(params)
            .then((res) => {
              if (res.code == 200) {
                this.loading = false
                this.dbSecrekey = res.data
                console.log(this.dbSecrekey)
                localStorage.set('dbSecrekey', this.dbSecrekey)
                this.dialogVisible = false
                this.goDbServe()
                this.$message.success('成功！')
              } else {
                this.$message.error(res.code + '-' + res.msg)
              }
            })
            .catch((e) => {
              this.$message.error(e.toString())
            })
        }
      })
    },

    testBtn(formName) {
      console.log(this.dbData.id)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = JSON.parse(JSON.stringify(this[formName]))
          params = {
            aliasName: this.dbData.aliasName,
            dbDriver: this.dbData.dbDriver,
            name: this.dbData.dbName,
            dbType: this.dbData.dbType,
            dbUrl: this.dbData.dbUrl,
            dbUsername: this.dbData.dbUsername,
            dbPassword: this.dbData.dbPassword,
          }
          this.$db
            .getDbTest(params)
            .then((res) => {
              if (res.code === 200) {
                this.$message.success('通过,可以添加！')
              } else {
                this.$message.error(res.code + '-' + res.message)
              }
            })
            .catch((e) => {
              this.$message.error(e.message)
            })
        }
      })
    },

    //删除
    deleteTable(o) {
      console.log(o)
      this.$confirm('是否删除 ' + o.aliasName + ' 参数?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        let params = {
          id: o.id,
        }
        this.$db.delDbTable(params).then((res) => {
          if (res.code === 200) {
            this.$message.success('删除' + o.aliasName + '成功！')
            this.goDbServe()
          } else {
            this.$message.error(res.code + '-' + res.msg)
          }
        })
      })
    },
  },
}
</script>

<style  lang="less">
.JustCard {
  .popBox {
    display: flex;
    flex-direction: column;
    // justify-content: space-between;
    align-items: center;
    // height: 60px;
    i {
      margin-bottom: 10px;
    }
  }
  .div {
    width: 98%;
    margin-left: 1%;
    span {
      color: rgb(0, 110, 255);
    }
  }
  .justAdd {
    float: left;
    width: 2%;
    margin-top: 20px;
    .el-icon-plus {
      color: #409eff;
      font-size: 30px;
    }
  }
  .justItem {
    float: left;
    width: 100%;
    min-height: 500px;
    .dbData {
      width: 100%;
      .el-card__body {
        padding: 20px 5px 20px 0;
      }
      .dbWrap {
        width: 24%;
        margin: 10px 0.5%;
        flex-wrap: wrap;
        float: left;
        .addProduct {
          color: #999;
          font-size: 18px;
        }
        .firstDiv {
          height: 77%;
          margin-top: 5%;
          width: 100%;
          border-bottom: 1px solid #e6ebf5;
          .fLeftDiv {
            width: 30%;
            height: 100%;
            float: left;
            text-align: center;
            .image {
              width: 80px;
              height: 80px;
              border-radius: 50%;
            }
          }
          .fRight {
            width: 70%;
            height: 100%;
            float: left;
            .titCon {
              font-size: 16px;
              color: #333;
              height: 20%;
              line-height: 40px;
              width: 95%;
              margin-left: 5%;
              font-size: 18px;
              white-space: nowrap; /*内容超宽后禁止换行显示*/
              overflow: hidden; /*超出部分隐藏*/
              text-overflow: ellipsis; /*文字超出部分以省略号显示*/
            }
          }
        }
        .secendDiv {
          height: 23%;
          width: 100%;
          .sLeftDiv,
          .sRightDiv {
            width: 49.5%;
            float: left;
            height: 100%;
            line-height: 65px;
            font-size: 18px;
            text-align: center;
          }
          .el-divider--vertical {
            height: 100%;
          }
        }
      }
    }
  }
}
</style>